<template>
    <div class="layout">
        <!-- 导航栏 -->
        <div class="layout-top">
            <div class="layout-header">
                <div class="mr-3">{{ $root.username }}</div>
                <el-button type="text" @click="visible = true">修改密码</el-button>
                <el-button type="text" @click="$root.logOut">退出</el-button>
            </div>
        </div>

        <!-- 侧边栏 -->
        <div class="layout-left">
            <h1 class="layout-title">WORKFLOW</h1>
            <sidebar :routes="$root.sidebarRoutes" />
        </div>

        <!-- 内容 -->
        <div class="layout-content">
            <transition name="el-fade-in" mode="out-in">
                <router-view />
            </transition>
        </div>

        <!-- 修改密码对话框 -->
        <el-dialog title="修改密码" :visible.sync="visible" custom-class="change-password" @closed="handleClosed">
            <template #default>
                <div class="input_box">
                    <div class="input_box-label">旧密码</div>
                    <input v-model="formData.oldPassword" type="text" class="input_box-control" />
                </div>
                <div class="input_box">
                    <div class="input_box-label">新密码</div>
                    <input v-model="formData.newPassword" type="password" class="input_box-control" />
                </div>
                <div class="input_box">
                    <div class="input_box-label">确认密码</div>
                    <input v-model="formData.cfPassword" type="password" class="input_box-control" />
                </div>
            </template>
            <template #footer>
                <el-button type="primary" @click="save" :disabled="isSaveButtonDisabled">保存</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import sidebar from '../components/sidebar';
import { encrypt } from '../functions';

export default {
    data() {
        return {
            visible: false,

            formData: {
                oldPassword: '',
                newPassword: '',
                cfPassword: '',
            },
        };
    },

    components: { sidebar },

    computed: {
        isSaveButtonDisabled() {
            return !this.formData.oldPassword || !this.formData.newPassword || !this.formData.cfPassword;
        },
    },

    methods: {
        handleClosed() {
            this.formData.oldPassword = '';
            this.formData.newPassword = '';
            this.formData.cfPassword = '';
        },

        save() {
            let data = Object.assign({}, this.formData);

            if (data.newPassword !== data.cfPassword) {
                this.$message.error('两次密码不正确');
                return;
            }

            data.oldPassword = encrypt(data.oldPassword);
            data.newPassword = encrypt(data.newPassword);
            data.cfPassword = encrypt(data.cfPassword);

            this.$put('/yxl/manager/updateManagerPassword', data).then(res => {
                this.$notify({
                    showClose: false,
                    type: 'success',
                    title: '成功通知',
                    message: '修改密码成功，请重新登录!',
                });

                this.$root.isLoggedIn = false;
            });
        },
    },

    created() {
        this.$root.getAdministratorInfo();
        this.$root.getAdministratorRoutes();
    },
};
</script>